<template>
    <div class="basic-info-form">
        <h3 class="form-title">基本信息</h3>
        <div class="form-grid">
            <!-- 左侧表单区域 -->
            <div class="form-column">
                <el-form-item label="学号" class="form-item">
                    <el-input v-model="info.student_id" :disabled="isStudentIdDisabled" class="form-input"
                        placeholder="请输入学号" />
                </el-form-item>

                <el-form-item label="姓名" class="form-item">
                    <el-input v-model="info.name" class="form-input" placeholder="请输入姓名" />
                </el-form-item>

                <el-form-item label="身份证号" class="form-item">
                    <el-input v-model="info.id_card" class="form-input" placeholder="请输入18位身份证号" maxlength="18" />
                </el-form-item>

                <el-form-item label="联系电话" class="form-item">
                    <el-input v-model="info.contact_phone" class="form-input" placeholder="请输入联系电话" maxlength="11" />
                </el-form-item>
            </div>

            <!-- 右侧表单区域 -->
            <div class="form-column">
                <el-form-item label="性别" class="form-item">
                    <el-select v-model="info.sex" class="form-select" placeholder="请选择性别">
                        <el-option label="男" value="1" />
                        <el-option label="女" value="0" />
                    </el-select>
                </el-form-item>

                <el-form-item label="专业" class="form-item">
                    <el-select v-model="info.major_id" class="form-select" placeholder="请选择专业">
                        <el-option v-for="major in majors" :key="major.id" :label="major.name" :value="major.id" />
                    </el-select>
                </el-form-item>

                <el-form-item label="班级" class="form-item">
                    <el-select v-model="info.class_id" class="form-select" placeholder="请选择班级">
                        <el-option v-for="cls in classes" :key="cls.id" :label="cls.name" :value="cls.id" />
                    </el-select>
                </el-form-item>

                <el-form-item label="宿舍" class="form-item">
                    <el-select v-model="info.dorm_id" class="form-select" placeholder="请选择宿舍">
                        <el-option v-for="dorm in dorms" :key="dorm.id" :label="dorm.name" :value="dorm.id" />
                    </el-select>
                </el-form-item>
            </div>
        </div>

        <!-- 头像上传区域 -->
        <el-form-item label="头像" class="form-item avatar-upload">
            <el-upload class="avatar-uploader" action="/api/upload" :show-file-list="false"
                :on-success="handleAvatarSuccess">
                <img v-if="info.photo" :src="info.photo" class="avatar" />
                <div v-else class="avatar-placeholder">
                    <el-icon class="avatar-upload-icon">
                        <Plus />
                    </el-icon>
                    <span class="upload-text">上传头像</span>
                </div>
            </el-upload>
        </el-form-item>
    </div>
</template>

<script setup>
import { defineProps, defineEmits, watch } from 'vue';
import { Plus } from '@element-plus/icons-vue';

// 接收父组件传递的信息
const props = defineProps({
    info: {
        type: Object,
        required: true,
        default: () => ({
            student_id: '',
            name: '',
            major_id: null,
            class_id: null,
            contact_phone: '',
            id_card: '',
            dorm_id: null,
            photo: '',
            sex: null,
            user_id: null,
            id: null
        })
    },
    // 下拉选项数据
    majors: {
        type: Array,
        default: () => []
    },
    classes: {
        type: Array,
        default: () => []
    },
    dorms: {
        type: Array,
        default: () => []
    },
    // 控制学号是否可编辑
    isStudentIdDisabled: {
        type: Boolean,
        default: true
    }
});

// 定义事件
const emit = defineEmits(['update:info']);

// 监听信息变化并通知父组件
watch(
    () => props.info,
    (newVal) => {
        emit('update:info', { ...newVal });
    },
    { deep: true }
);

// 处理头像上传成功
const handleAvatarSuccess = (response) => {
    if (response.success) {
        emit('update:info', { ...props.info, photo: response.data.url });
    }
};
</script>

<style scoped>
.basic-info-form {
    background-color: var(--bg-color-common);
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
}

.form-title {
    color: var(--text-color-menu);
    font-size: 16px;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-color-common);
}

.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

.form-column {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.form-item {
    margin-bottom: 0;
}

.form-input,
.form-select {
    width: 100%;
    border-color: var(--border-color-input);
}

.form-input:focus,
.form-select:focus {
    border-color: var(--border-color-input-focus);
}

.avatar-upload {
    margin-top: 15px;
    grid-column: 1 / -1;
}

.avatar-uploader {
    display: flex;
    align-items: center;
}

.avatar {
    width: 120px;
    height: 120px;
    border-radius: 6px;
    object-fit: cover;
    border: 1px solid var(--border-color-common);
}

.avatar-placeholder {
    width: 120px;
    height: 120px;
    border-radius: 6px;
    border: 1px dashed var(--border-color-input);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.2s;
}

.avatar-placeholder:hover {
    background-color: var(--bg-color-hover);
}

.avatar-upload-icon {
    font-size: 24px;
    color: var(--text-color-tip);
    margin-bottom: 8px;
}

.upload-text {
    font-size: 12px;
    color: var(--text-color-tip);
}
</style>